<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 09:06:50
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-21 13:46:52
 * @FilePath: \company-world\src\views\homepage\index.vue
 * @Description: 增加/修改菜单
-->
<template>
  <div class="issues-main" v-loading="state.loading">
    <div class="issues-wrap left">
      <!-- 标题 -->
      <div class="left-title">
        <div class="icon"></div>
        <h3>新建 菜单</h3>
      </div>
      <el-form :model="form" ref="ruleFormRef" status-icon :rules="rules">
        <h4>菜单类型</h4>
        <el-form-item prop="type">
          <el-select-v2 v-model="form.type" placeholder="请选择" :options="menuSort" />
        </el-form-item>
        <h4>菜单编码</h4>
        <el-form-item prop="menu_code">
          <el-input v-model="form.menu_code" />
        </el-form-item>
        <h4>菜单权限</h4>
        <el-form-item prop="permission_code">
          <el-input v-model="form.permission_code" />
        </el-form-item>
        <!-- 接受人 -->
        <h4>菜单路由</h4>
        <el-form-item prop="path">
          <el-input v-model="form.path" />
        </el-form-item>
        <h4>菜单背景颜色</h4>
        <el-form-item prop="background_color">
          <el-select v-model="form.background_color" class="m-2" placeholder="请选择">
            <template #prefix>
              <div class="input-icon">
                <div :style="{ backgroundColor: form.background_color }" class="colorBoard"></div>
              </div>
            </template>
            <template #empty>
              <div class="choose-color">
                <div
                  class="icon-select"
                  id="icons"
                  v-for="(item, index) in colorLists"
                  :key="index"
                  @click="checkColor(item)"
                >
                  <div :style="{ backgroundColor: item }" class="colorBoard"></div>
                </div>
              </div>
            </template>
          </el-select>
        </el-form-item>
        <h4>菜单名称</h4>
        <el-form-item prop="name">
          <el-input class="form-input" v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button size="large" color="#6C52EA" plain @click.stop="handleSave(pageId)">{{
          pageId ? '保存' : '创建'
        }}</el-button>
        <el-button size="large" class="cancel" @click="handleBack" plain>{{
          pageId ? '取消' : '返回'
        }}</el-button>
      </div>
    </div>
    <div class="issues-wrap right">
      <div class="issues-wrap content">
        <div class="right-title">
          <el-tooltip effect="dark" content="返回">
            <el-button @click.stop="handleBack" text>
              <svg class="action-icon" aria-hidden="true" width="18" height="18">
                <use xlink:href="#iconzuojiantou" fill="#409eff" />
              </svg>
            </el-button>
          </el-tooltip>
        </div>
        <!-- 右侧表单 -->
        <RightForm
          @send-tagsDialog="handleDialog"
          :form="form"
          :rules="rules"
          :parentData="state.parentData"
          :defaultTopValue="defaultTopValue"
          ref="useGetData"
        >
        </RightForm>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { LocationQuery, useRouter } from 'vue-router'
import { setting } from '@/utils/setting'
import { Issues } from '@/views/issues/config/issues'
import { ElMessage, FormRules } from 'element-plus'
import Editor from '@tinymce/tinymce-vue'
import AddTags from './component/AddTags.vue'
import RightForm from './components/RightForm.vue'
import Router from '@/router'
import { getMenuList } from '@/apis/jurisdiction/menu'
import { colorList } from '@/utils/color'
import { Itype } from '@/type/index'
import { newMenuData, editMenuData } from '@/apis/jurisdiction/menu'
const $router = useRouter()
const pageId = ref<number>(+$router.currentRoute.value.query.id!)
const defaultTopValue = ref('0')
let form: Itype = reactive({
  _id: 0,
  name: '',
  // 菜单名称
  menuName: '',
  parent_name: '',
  level: 0,
  // 类型
  type: '',
  //上级菜单
  parentMenu: '',
  // 父级ID
  parent_id: 0,
  // 图标
  icon: '',
  // 路径
  path: '',
  // 编码
  menu_code: '',
  // 是否显示
  is_show: '',
  // 备注
  menu_remarks: '',
  children: '',
  //背景颜色
  background_color: '',
  permission_code: '',
  defaultProps: {
    children: 'children',
    label: 'name'
  }
})
const state = reactive({
  loading: false,
  parentData: [
    {
      name: '顶级菜单',
      id: 0,
      children: []
    }
  ]
})
/**
 * @desc:获取菜单
 */
interface Isearch {
  [key: string]: any
}
let search: Isearch = ref()
let dataList = ref()
const getData = () => {
  state.loading = true
  getMenuList()
    .then((res) => {
      dataList.value = res
      state.parentData[0].children = dataList.value
      state.parentData = state.parentData.filter((father: Itype) => {
        const arr = state.parentData.filter((child: Itype) => {
          return father.id == child.parent_id
        })
        if (arr.length > 0) {
          father.children = arr
        }
        return father.parent == null
      })
      state.loading = false
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}
getData()
/**
 * @desc:获取颜色
 */
const colorLists = ref([''])
colorLists.value = JSON.parse(JSON.stringify(colorList))
const other = ref('')
const rules = reactive<FormRules>({
  type: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
  menu_code: [{ required: true, message: '菜单编码不能为空', trigger: 'blur' }],
  path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }]
})
const menuSort = reactive([
  {
    value: '菜单',
    label: '菜单'
  },
  {
    value: '菜单组',
    label: '菜单组'
  },
  {
    value: '按钮',
    label: '按钮'
  }
])
const emit = defineEmits(['dialogClose', 'dialogSave', 'handleSave'])
const baseUrl = 'https://dwh_api.bimcc.net'
/**
 * @desc:获取修改数据
 */
interface RouteQuery extends LocationQuery {
  conObj: string
}
const contentInfo = ref({} as Itype)
const routeQuery = $router.currentRoute.value.query as RouteQuery
const getEditData = () => {
  if ($router.currentRoute.value.query.conObj) {
    const str: string = decodeURIComponent(routeQuery.conObj)
    contentInfo.value = JSON.parse(str)
    form = contentInfo.value
  }
}
getEditData()
/**
 * @desc:获取下拉父级id
 */
interface ImenuList {
  id: number
  name: string
}
const handleNodeClick = (row: ImenuList) => {
  const { id, name } = row
  form.parent_id = id
  form.parent_name = name
}
/**
 * @desc:获取点击color
 */
const checkColor = (data: string) => {
  form.background_color = data
}
/**
 * @desc:保存关闭弹窗
 */
const ruleFormRef = ref()
const handleSave = (id: number) => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      state.loading = true
      if (id) {
        form._id = id
        editData(form)
      } else {
        createData(form)
      }
    }
  })
}
/**
 * @desc: 创建菜单
 */
const createData = (form: Itype) => {
  newMenuData(form)
    .then((res) => {
      if (!res) return
      handleBack()
      ElMessage.success('创建成功')
    })
    .catch((err) => {
      ElMessage('服务器内部错误')
    })
    .finally(() => {
      state.loading = false
    })
}
/**
 * @desc: 修改菜单
 */
const editData = (form: Itype) => {
  editMenuData(form)
    .then((res) => {
      if (!res) return
      handleBack()
      ElMessage.success('修改成功')
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
    .finally(() => {
      state.loading = false
    })
}
/**
 * @desc: 增加标签
 */
const tagsDialog = ref(false)
const handleDialog = () => {
  tagsDialog.value = true
}
/**
 * @desc: 后退
 */
const handleBack = () => {
  Router.back()
}
</script>

<style lang="less" scoped>
@color: #fdf6ec;
h4 {
  padding-bottom: 20px;
}
.choose-color {
  overflow: auto;
  width: 287px;
  height: 300px;
  margin: 0;
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
  z-index: 999;
  .icon-select {
    display: inline-block;
    width: 40px;
    .colorBoard {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
  }
}
.button {
  position: absolute;
  bottom: 5%;
  right: 4%;
  .cancel {
    color: #dcd0ff;
  }
}

.issues-main {
  display: flex;
  overflow: auto;
  height: 100%;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  .left {
    width: 70%;
    .left-title {
      display: flex;
      align-items: center;
      padding-bottom: 20px;

      .icon {
        height: 26px;
        width: 6px;
        margin-right: 16px;
        box-sizing: border-box;
        background: #409eff;
        border-radius: 3px;
      }
    }
  }

  .right {
    flex: 1;
    width: 50%;
    .content {
      margin-left: 20px;

      .right-title {
        display: flex;
        justify-content: flex-end;
        height: 26px;
        padding-bottom: 20px;
        line-height: 26px;
      }
    }
  }

  .el-button--large {
    margin-top: 20px;
  }
}
.form-option {
  height: auto !important;
  background-color: #fff !important;
}
</style>
